<template>
  <div class="rl-collapse-item"
  :class="{
    'is-diabled':disabled
  }">
    <!-- 标题区域 -->
    <div
      class="rl-collapse-item-title"
      :id="`item-title-${name}`"
      @click="handleClick"
      :class="{
        'is-active':isActive
      }"
    >
      <slot name="title">{{ title }}</slot>   
      <RlIcon icon="angle-right" class="header-angle"></RlIcon>
    </div>
    <!-- 内容区域 -->
    <div 
      class="rl-collapse-item-content"
      v-show="isActive"
      :id="`item-content-${name}`"
    >
      <slot></slot>
    </div>
  </div>

</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import { collapseContextKey, type CollapseItemProps } from './types';
import RlIcon from '../Icon/Icon.vue'

defineOptions({
  name:'RlCollapseItem'
})
const props = defineProps<CollapseItemProps>()
// 从Collapse组件中注入上下文数据
const collapseContext = inject(collapseContextKey)

// 使用计算属性判断当前是否处于展开状态
const isActive = computed(()=>{
  return collapseContext?.activeNames.value.includes(props.name)
})

// 处理点击事件，展开或折叠当前项的内容
const handleClick = ()=>{
  if(props.disabled) return  //disabled属性为true，不执行展开操作
  collapseContext?.handleItemClick(props.name)
}
</script>

